<template>
    <div>
        <el-carousel height="36px" :interval="6000" direction="vertical" arrow="never" indicator-position="none">
            <el-carousel-item v-for="(item, index) in data" :key="index" >
                <div class="content-box flex">
                    <div class="name flex-1 text-center">
                        {{ filterName(item.userName) }}
                    </div>
                    <div class="value flex-2 text-center">
                        {{ item.content }}
                    </div>
                    <div class="name flex-2 text-center">
                        理赔金额<span class="fc-green">{{ item.amount }}</span>元
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { filterName } from '@/utils/util.ts';
const props = defineProps({
    data: {
        type: Array,
        default() {
            return []
        }
    }
})
// const data = ref([
//     {
//         name: '王大毛',
//         value: 10,
//         amount: 2000
//     },
//     {
//         name: '王大毛1',
//         value: 12,
//         amount: 1000
//     },
//     {
//         name: '王大毛2',
//         value: 14,
//         amount: 4000
//     },
// ])
</script>
<style lang="stylus" scoped>
.content-box
    border 1px solid 
    background radial-gradient(19% 19% at 50% 0%, rgba(0, 202, 255, 0.2) 0%, rgba(0, 139, 255, 0.01) 100%), linear-gradient(180deg, rgba(0, 255, 249, 0.46) 0%, rgba(43, 142, 255, 0) 98%)
    border-image linear-gradient(180deg, #26A0F2 0%, #26A0F2 98%) 1
    // backdrop-filter blur(10px)
    box-shadow inset 0px -3px 6px 0px rgba(0, 255, 249, 0.3511)
    color #fff
    height 36px
    line-height 36px
.fc-green
    color #19EBFF
</style>